<template>
  <div class="main">
    <div class="price"><span>￥</span>{{ total_price }}</div>
    <div @click="selectItems.length ? isShow = true : ''" class="detail">明细🔺</div>
    <!-- <div :class="{'button':!diff,'buttonLow':diff}"><button>{{ buttonMsg }}</button></div> -->
    <div class="button"><button :class="{'makeup_bt':diff,'settle_bt':!diff}"><span>{{ buttonMsg }}</span></button></div>

    <div v-if="isShow" class="modal-backdrop"></div>
    <Teleport to="body">
        <div class="detail modal-content" v-if="isShow">
            <Detail 
            @unShow="isShow = false"
            :total_price="total_price"
            :pre_total_price="pre_total_price"
            :packCharge="packCharge"/>
        </div>
    </Teleport>
  </div>
</template>

<script>
import { computed, onUpdated, ref, watch } from 'vue';
import Detail from './DetailMsg.vue';
import { useRoute } from 'vue-router';

export default {
    name:'ListCollect',
    components:{Detail},
    props:['items'],
    setup(props){
        const route = useRoute()
        //结算按钮
        let buttonMsg = ref('')
        //明细默认不展开
        let isShow = ref(false)
        //初步选择的商品
        let items = computed(()=>{return props.items})

        //购物车勾选的商品
        let selectItems = computed(()=>{
            return items.value.filter((t)=>t.select_settle)
        })
        //没有选中的商品，则点不开明细
        watch(()=>items.value.length,(newVal)=>{
            if(newVal===0){
                isShow.value = false
            }
        })
        //折后总价(含打包费)
        let total_price = computed(()=>{
            let count = 0
            selectItems.value.forEach((t)=>count+=t.price*t.selectSum*t.discount/10)
            return (count+packCharge.value).toFixed(2)
        })
        //原商品总价(不含打包费)
        let pre_total_price = computed(()=>{
            let count = 0
            selectItems.value.forEach((t)=>count+=t.price*t.selectSum)
            return (count).toFixed(2)
        })
         // 计算打包费
         let packCharge = computed(()=>{
            if(selectItems.value.length===0){
                return 0
            }
            if(selectItems.value.length<5){
                return 0.5
            }
            if(selectItems.value.length>=5&&selectItems.value.length<10){
                return 0.8
            }
            if(selectItems.value.length>=10){
                return 1.2
            }
        })
        
        
        //起送价
        let startPrice = JSON.parse(route.query.obj).start_price
        //差价
        let diff = computed(()=>{
            if(startPrice - total_price.value>0){
                return (startPrice - total_price.value).toFixed(2)
            }else{
                return 0
            }
        })
        //检测是否满足配送
        watch(total_price,()=>{
            if(diff.value<=0||diff.value==20){
                buttonMsg.value = '去结算'
            }else{
                buttonMsg.value = computed(()=>{
                    buttonMsg.value ='差￥'+diff.value+'起送'
                })
            }
        })
        return { isShow,items,selectItems,total_price,packCharge,pre_total_price,startPrice,buttonMsg,diff }
    }
}
</script>

<style scoped>
    .main {
        height: 50px;
        display: flex;
        justify-content: space-between;
        background-color: white;
    }
    .details {
        width: 100%;
        height: auto;
        background-color: white;
    }
    .button {
        width: 100px;
        margin-top: 3%;
    }
    .button button {
        height: 60%;
        width: 80%;
        padding-bottom: 5px;
        border: transparent;
        border-radius: 7%;
        
        color: white;
        line-height: 20px;
        display: flex;
        align-content: center;
        justify-content: center;
    }
    .settle_bt {
        background-color: #409EFF;
    }
    .makeup_bt {
        font-size: 10px;
        background-color: grey;
    }
    .price {
        width: 60px;
        margin-top: 3%;
        margin-left: 10%;
    }
    .price span{
        font-size: 10px;
    }
    .detail {
        margin-top: 3%;
        z-index: 20; /* 确保弹窗在遮罩层之上 */
    }
    .modal-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
        z-index: 10; /* 确保遮罩层在内容之上但在弹窗之下 */
    }

    .modal-content {
        background-color: white;
        padding: 20px;
        border-radius: 8px;
    }

</style>